<template>
  <div id="message-create">
    <el-form ref="form" :model="formInline" inline :rules="rules" label-width="80px" size="mini">
      <el-form-item label="分类一：">
        <el-select v-model="formInline.label_top" clearable  placeholder="请选择" @change="getSecondLabel">
          <el-option
            v-for="item in label_top"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类二：">
        <el-select v-model="formInline.label_second" clearable  style="margin-left: 20px;" placeholder="请选择">
          <el-option
            v-for="item in label_second"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form label-width="80px">
      <el-form-item label="" prop="question">
        <el-input
          v-model="formInline.question"
          type="textarea"
          placeholder="请输入回复内容"
          :rows="10"
          resize="none"
        />
      </el-form-item>
      <el-form-item size="large">
        <el-button class="pull-right" type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { firstLabel, secondLabel, addMsgBroad } from '@/api/message'
export default {
  data() {
    return {
      label_top: [],
      label_second: [],
      formInline: {
        question: '',
        label_top: '',
        label_second: ''
      },
      rules: {
        question: [
          { required: true, message: ' ', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getFirstLabel()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = Object.assign(this.formInline, {
            label_top_name: this.formInline.label_top
              ? this.label_top.filter(({ value, label }) => Number(value) === Number(this.formInline.label_top))[0].label
              : '',
            label_second_name: this.formInline.label_second
              ? this.label_second.filter(({ id, label }) => Number(id) === Number(this.formInline.label_second))[0].label
              : ''
          })
          addMsgBroad(params).then(res => {
            const code = Number(res.code)
            if (code === 200) {
              this.$router.push('/message/list')
            }
          })
        }
      })
    },
    async getFirstLabel() {
      const res = await firstLabel({ value: 9 })
      const code = Number(res.code)
      if (code === 200) {
        this.label_top = res.data.map(({ label, value }) => ({ label, value: Number(value) }))
      }
    },
    async getSecondLabel() {
      const res = await secondLabel({ value: this.formInline.label_top })
      const code = Number(res.code)
      if (code === 200) {
        this.label_second = res.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#message-create{

}
</style>
